<template>
	<view class="buyer-box">
		<uni-swiper-dot :info="subjectRankList" :current="current" field="content" :mode="mode" :selectedBackgroundColor="'#666666'">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item,index) in subjectRankList" :key="index">
					<view class="swiper-item">
						<!-- <image :src="item.url" mode=""></image> -->
						<view class="switch-list">
							<image lazy-load :lazy-load-margin="0" :src="item.firstPagePic" class="t-img" mode=""></image>
							<view class="info">
								<view class="head">
									<image :src="item.avatar" class="u-img" mode=""></image>
									<image v-if="item.useCount == 1" src="../../static/image-01.png" class="tips" mode=""></image>
									<image v-if="item.useCount == 2" src="../../static/image-02.png" class="tips" mode=""></image>
									<image v-if="item.useCount == 3" src="../../static/image-03.png" class="tips" mode=""></image>
								</view>
								<view class="info-r">
									{{item.userName}}
									<view class="desc">
										当月排名<text class="txt">{{item.useCount}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view class="nav">
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==item.id}" @click="chenked(item,index)">
						<text class="text">{{item.tagName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!--瀑布流-->
		<scroll-view :style="{height:scrollH+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="loadMoreImages">
			<waterfallsFlow :single="true" :list="list" v-if="list.length" :imageSrcKey="'firstPagePic'" @wapper-lick="goUrl">
				
				<!--  #ifdef  MP-WEIXIN -->
				<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
					<view class="goodsPrice">
						<image :src="item.avatar" class="u-img"></image>
						<view class="g-right">
							<view class="describ">
								{{item.describ}}
							</view>
							<view class="cc">
								{{item.userName}}
							</view>
						</view>
					</view>
				</view>
				<!--  #endif -->
			
				<!-- #ifndef  MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="goodsPrice">
						<image :src="item.avatar" class="u-img"></image>
						<view class="g-right">
							<view class="describ">
								{{item.describ}}
							</view>
							<view class="cc">
								{{item.userName}}
							</view>
						</view>
					</view>
				</template>
				<!--  #endif -->
			</waterfallsFlow>
			<empty @reload="getList" v-if="!list.length && show"/>
		</scroll-view>
		<Tabbar :current="3"></Tabbar>
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/waterfalls-flow/index.vue";
	import Tabbar from '@/components/tabBar.vue'
	import empty from "@/components/empty.vue";
	import {getQuerylist} from "@/api/user.js"
	import {getBuyerShowList,getQuerySubjectRank} from "@/api/buyer.js"
	
	export default {
		components: { waterfallsFlow, Tabbar, empty },
		data() {
			return {
				isActive: 0,
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",
				category:[],
				subjectRankList: [] ,
				list: [
					// {
					//   id: 1,
					//   image_url:
					// 	"../../static/66.png",
					//   title: "可爱的小猫咪呀",
					//   text:
					// 	"小小的猫咪",
					// },
				],
				info: [{
					url: '../../static/66.png'
				}, {
					url: '../../static/user.png'
				}, {
					url: '../../static/66.png'
				}],
				current: 0,
				mode: 'default',
				show: false
			};
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		onLoad() {
			this.tag()
		},
		computed:{
			scrollH:function(){
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750/winWidth;
				let winHeight = parseInt(sys.windowHeight*winrate) - 638
				return winHeight	
			},
		},
		mounted() {
			
		},
		methods:{
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(item,index) {
				if(this.isActive == item.id) return
				this.isActive = item.id;
				this.scrollLeft = 0;
				for (let i = 0; i <= index - 1; i++) {
					this.scrollLeft += this.category[i].width
				}
				this.list = []
				this.show = false
				this.getList()
			},
			// 瀑布流
			// 加载更多图片
			loadMoreImages: function() {
				console.log('加载更多图片', this.type)
				return
				if (!this.last) {
					wx.showLoading({
						title: "加载中...",
					});
					this.getGoodthingList();
				}
				wx.hideLoading();
			},
			goUrl(item){
				uni.removeStorage({
					key: 'selectedImgsList'
				})
				uni.removeStorage({
					key: 'selectedImgsData'
				})
				uni.removeStorage({
					key: 'payPrintObj'
				})
				uni.navigateTo({
					url: '/pagesC/buyer/detail?id=' + item.id +'&orderOrigin=2'
				})
			},
			getList(){
				getBuyerShowList({tagId:this.isActive}).then((res) => {
					this.list = res
					this.show = true
				})
			},
			tag(){
				// 获取标签
				getQuerylist().then((res) => {
					this.category = res
					this.category.unshift({
						tagName: '全部',
						id: ''
					})
					this.isActive = res[0].id
					this.$nextTick(() => {
						this.getScrollW()
					})
					this.getList()
				})
				
				getQuerySubjectRank().then((res) => {
					this.subjectRankList = res
				})
			},
			change(e){
				this.current = e.detail.current;
			},
			onPullDownRefresh() {
				this.getList()
				uni.stopPullDownRefresh()
			},
		}
	}
</script>

<style lang="less" scoped>
.buyer-box{
	padding-top: 44rpx;
	.swiper-box{
		height: 400rpx;
	}
	.switch-list{
		margin: 0 40rpx;
		position: relative;
		.head{
			// border: 2rpx solid #FEFEFE;
			border-radius: 50%;
			width: 106rpx;
			height: 106rpx;
			text-align: center;
			line-height: 106rpx;
			margin-right: 20rpx;
			position: relative;
			.u-img{
				width: 106rpx;
				height: 106rpx;
				vertical-align: middle;
				border-radius: 50%;
			}
			.tips{
				width: 124rpx;
				height: 122rpx;
				position: absolute;
				top: -70rpx;
				left: -30rpx;
			}
		}
		.info{
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 30rpx;
			left: 32rpx;
			.info-r{
				font-size: 24rpx;
				font-weight: bold;
				color: #FEFEFE;
			}
			.desc{
				font-size: 20rpx;
				margin-top: 6rpx;
				color: #ccc;
				.txt{
					color: #FEFEFE;
					margin-left: 12rpx;
					font-size: 32rpx;
				}
			}
		}
	}
	.t-img{
		height: 400rpx;
		width: 100%;
		border-radius: 40rpx;
		opacity: 0.8;
	}
	.nav{
		width: 100%;
		align-items: center;
		height: 90rpx;
		padding-top: 26rpx;
		background-color: #f3ecef;
		.tab-scroll{
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 30rpx;
			.tab-scroll_box{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				box-sizing: border-box;
				.tab-scroll_item{
					margin-right: 17rpx;
					flex-shrink: 0;
					padding: 0 24rpx;
					height: 56rpx;
					line-height: 56rpx;
					display: flex;
					justify-content: center;
					font-size: 24rpx;
					border-radius: 32rpx;
					font-family: PingFangSC-Regular;
					color: #AAAAAA;
				}
				.active{
					border-radius: 32px;
					background: #E5CAD6;
					color: #fff;
				}
			}
		}
	}
	
	.scroll-Y{
		// margin-top: 130rpx;
		// background-color: #333;
	}
	.b-img{
		width:320rpx;
	}
	
	.goodsPrice{
		color: #3D3D3D;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		margin-bottom: 5rpx;
		.u-img{
			width: 66rpx;
			height: 66rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.cc{
			color: #979797;
		}
		.g-right{
			flex: 1;
		}
		.describ{
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			word-wrap: break-word;
			-webkit-hyphens: auto;
			hyphens: auto;
		}
	}
}
</style>
